<script src="statics/AmazeUI/assets/js/amazeui.js"></script>
<script src="statics/AmazeUI/assets/js/amazeui.ie8polyfill.js"></script>

<!-- 会员登录 start -->
<div class="am-modal am-modal-no-btn" tabindex="-1" id="member-login-modal">
    <div class="am-modal-dialog am-panel am-panel-default">
        <div class="am-modal-hd am-panel-hd">
            会员登录<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
        </div>
        <div class="am-modal-bd am-panel-bd am-padding-0">
            <form id="loginWindowForm" class="am-form am-form-horizontal am-margin-top" action="http://localhost:8080/user/login" method="post">
                <div class="am-form-group">
                    <div class="am-u-sm-12 am-input-group am-input-group-sm">
                        <span class="am-input-group-label"><i class="am-icon-user am-icon-fw"></i></span>
                        <input type="text" class="am-form-field" name="username" placeholder="用户名" required>
                    </div>
                </div>
                <div class="am-form-group am-form-group-sm">
                    <div class="am-u-sm-12 am-input-group am-input-group-sm">
                        <span class="am-input-group-label"><i class="am-icon-lock am-icon-fw"></i></span>
                        <input type="password" class="am-form-field" name="password" placeholder="密码" required>
                    </div>
                </div>
                <div class="am-form-group am-form-group-sm">
                    <div class="am-u-sm-12 am-text-xs am-text-left">
                        <a href="member_password_recover.html">忘记了密码? 点击找回!</a>
                    </div>
                </div>
                <div class="am-form-group am-form-group-sm">
                    <div class="am-u-sm-12 am-input-group am-input-group-sm">
                        <input type="hidden" name="role" value="1" />
                        <button id="loginWindowFormBtn" type="submit" class="am-btn am-btn-primary am-btn-block" data-am-loading="{loadingText: '努力登录中...'}">登录</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- 会员登录 end -->
<!-- 会员注册 start -->
<div class="am-modal am-modal-no-btn" tabindex="-1" id="member-register-modal">
    <div class="am-modal-dialog am-panel am-panel-default">
        <div class="am-modal-hd am-panel-hd">
            会员注册<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
        </div>
        <div class="am-modal-bd am-panel-bd am-padding-0">
            <form id="registerWindowForm" class="am-form am-form-horizontal am-margin-top" action="http://localhost:8080/user/register" method="post">
                <div class="am-form-group">
                    <div class="am-u-sm-12 am-input-group am-input-group-sm">
                        <span class="am-input-group-label"><i class="am-icon-user am-icon-fw"></i></span>
                        <input type="text" class="am-form-field" name="username" placeholder="用户名：中文、英文、数字和下划线" required>
                    </div>
                </div>
                <div class="am-form-group am-form-group-sm">
                    <div class="am-u-sm-12 am-input-group am-input-group-sm">
                        <span class="am-input-group-label"><i class="am-icon-lock am-icon-fw"></i></span>
                        <input type="password" class="am-form-field" id="registerWindowPassword" name="password" placeholder="密码：密码长度不能小于4" required>
                    </div>
                </div>
                <div class="am-form-group am-form-group-sm">
                    <div class="am-u-sm-12 am-input-group am-input-group-sm">
                        <span class="am-input-group-label"><i class="am-icon-lock am-icon-fw"></i></span>
                        <input type="password" class="am-form-field" name="rePassword" placeholder="重复密码" data-equal-to="#registerWindowPassword" required>
                    </div>
                </div>
                <div class="am-form-group">
                    <div class="am-u-sm-12 am-input-group am-input-group-sm">
                        <span class="am-input-group-label"><i class="am-icon-phone am-icon-fw"></i></span>
                        <input type="text" class="am-form-field js-pattern-mobile" name="phone" placeholder="请输入手机号码" required>
                    </div>
                </div>
                <div class="am-form-group">
                    <div class="am-u-sm-12 am-input-group am-input-group-sm">
                        <span class="am-input-group-label"><i class="am-icon-envelope-square am-icon-fw"></i></span>
                        <input type="email" class="am-form-field" name="email" placeholder="请输入电子邮箱" required>
                    </div>
                </div>
                <div class="am-form-group am-form-group-sm">
                    <div class="am-u-sm-12 am-input-group am-input-group-sm">
                        <button id="registerWindowSubmitBtn" type="submit" class="am-btn am-btn-primary am-btn-block" data-am-loading="{loadingText: '努力注册中...'}">注册</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- 会员注册 end -->
<!-- 顶部操作栏和logo、搜索 start -->
<div class="shop-header">
    <div class="am-panel am-panel-default am-margin-bottom-0">
        <div class="am-panel-hd am-kai am-text-xs am-padding-vertical-0 am-padding-horizontal-xl am-cf">
            <div class="am-fl">
                <span id="headerLoginMemberUsername" class="am-text-warning am-fl"></span>
                <a href="javascript:void(0);" id="headerShowLoginWindow">[登  录]&emsp;</a>
                <a href="member_center_index.html" id="headerMemberCenter">[会员中心]&emsp;</a>
                <a href="javascript:void(0);" id="headerShowRegisterWindow">[注  册]</a>
                <a href="javascript:void(0);" id="headerLogout">[退  出]</a>
            </div>
            <div class="am-fr am-hide-sm-only">
                <a href="index.html">首页</a>
                |
                <a href="member_center_index.html">会员中心</a>
                |
                <a href="member_favorite_list.html">我的收藏</a>
                |
                <a href="member_receiver_order_list.html">订单中心</a>
            </div>
        </div>
        <div class="am-panel-bd am-padding-0">
            <div class="am-g">
                <div class="am-hide-sm-only am-u-md-4 am-u-lg-4 am-vertical-align" style="height:70px;">
                    <img class="am-vertical-align-middle" src="statics/img/logo.png" title="萌宠之家">
                </div>
                <div class="am-u-sm-12 am-u-md-5 am-u-lg-4 shop-margin-vertical">
                    <div class="am-g">
                        <div class="am-u-sm-12 am-input-group am-input-group-sm am-input-group-primary">
                            <input type="text" id="keyword" name="keyword" class="am-form-field" placeholder="请输入关键词..." value="" required>
                            <span class="am-input-group-btn">
                              <button class="am-btn am-btn-primary" id="btnSearch" type="button"><span class="am-icon-search"></span></button>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="am-show-lg-only am-u-lg-4 am-text-right am-vertical-align" style="height:64px;">
                    <div class="am-text-sm am-vertical-align-middle">
                        7×24小时服务热线：<strong>400-666-888</strong>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 顶部操作栏和logo、搜索 end -->
    <!-- 导航 start -->
    <header class="am-topbar am-margin-bottom-0">
        <div class="am-topbar-brand am-dropdown" data-am-dropdown>
            <button id="btnHotCategory" class="am-btn am-btn-default am-btn-sm am-dropdown-toggle" data-am-dropdown-toggle>
                &nbsp;热门分类 <span class="am-icon-caret-down"></span>
            </button>
            <ul id="ulCategoryList" class="am-dropdown-content am-text-sm am-kai"></ul>
        </div>

        <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only" data-am-collapse="{target: '#doc-topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span></button>

        <div class="am-collapse am-topbar-collapse" id="doc-topbar-collapse">
            <ul class="am-nav am-nav-pills am-topbar-nav">
                <li>
                    <a href="product_picture_list.html?cid=1&pcid=0">
                        <span class="am-icon-spoon">&emsp;</span>狗狗
                    </a>
                </li>
                <li>
                    <a href="product_picture_list.html?cid=2&pcid=0">
                        <span class="am-icon-soccer-ball-o">&emsp;</span>猫咪
                    </a>
                </li>
                <li>
                    <a href="product_picture_list.html?cid=3&pcid=0">
                        <span class="am-icon-support">&emsp;</span>仓鼠
                    </a>
                </li>
                <li>
                    <a href="product_picture_list.html?cid=4&pcid=0">
                        <span class="am-icon-rocket">&emsp;</span>龙猫
                    </a>
                </li>
                <li>
                    <a href="product_picture_list.html?cid=5&pcid=0">
                        <span class="am-icon-gift">&emsp;</span>荷兰猪
                    </a>
                </li>
            </ul>

            <div class="am-topbar-right">
                <button class="am-btn am-btn-primary am-topbar-btn am-btn-sm" id="btnCart"><span class="am-icon-shopping-cart am-margin-right-xs"></span>购物车</button>
            </div>
        </div>
    </header>
</div>
<!-- 导航 end -->
<script>

    // 商品分类列表
    let categoryList = new Array();

    // 商品分类id
    let categoryId = GetQueryString('cid');

    // 商品分类父id
    let parentCategoryId = GetQueryString('pcid');

    $(function() {

        // 刷新header登录、注册信息
        $.flushHeaderInfo = function () {

            // 登录按钮
            var $headerShowLoginWindow = $("#headerShowLoginWindow");
            // 注册按钮
            var $headerShowRegisterWindow = $("#headerShowRegisterWindow");
            // 用户名
            var $headerLoginMemberUsername = $("#headerLoginMemberUsername");
            // 会员中心
            var $headerMemberCenter = $("#headerMemberCenter");
            // 退出
            var $headerLogout = $("#headerLogout");

            // 获取本地session中的用户数据
            let jsonUser = sessionStorage.getItem("user");

            // 如果本地session中存在用户信息
            if( jsonUser ) {

                let user = JSON.parse(jsonUser);
                console.log(user);
                $headerLoginMemberUsername.html(user.username + '&emsp;');
                // 显示用户中心
                $headerMemberCenter.show();
                // 显示退出
                $headerLogout.show();

                // 隐藏登录按钮
                $headerShowLoginWindow.hide();
                // 隐藏注册按钮
                $headerShowRegisterWindow.hide();

            } else {

                // 置空用户名
                $headerLoginMemberUsername.text("");

                // 显示登录按钮
                $headerShowLoginWindow.show();
                // 显示注册按钮
                $headerShowRegisterWindow.show();

                // 隐藏用户中心
                $headerMemberCenter.hide();
                // 隐藏退出
                $headerLogout.hide();

            }// else( jsonUser );

        }// $.flushHeaderInfo();

        $.flushHeaderInfo();


        // 顶部'登录'按钮事件
        $("#headerShowLoginWindow").click( function() {
            $("#member-login-modal").modal();
        });

        // 顶部'注册'按钮事件
        $("#headerShowRegisterWindow").click( function() {
            $("#member-register-modal").modal();
        });

        // 顶部'退出'按钮事件
        $("#headerLogout").click( function() {

            // 当前用户token
            let token = sessionStorage.getItem("token");

            // 判断当前用户是否登录(token是否存在)
            if( !token ) {
                // token不存在的话，就清除session直接退出
                sessionStorage.clear();
                top.location.href = 'index.html';
                return;

            }// if( !token );

            Modal.register(['confirm','alert']);
            Modal.confirm("您确定要退出吗？",{
                relatedTarget: this,
                onConfirm: function(options) {
                    $.ajax({
                        type: 'POST',
                        url: 'http://localhost:8080/user/logout',
                        dataType: "json",
                        data: { token: token},
                        success: function() {

                            sessionStorage.clear();
                            top.location.href = 'index.html';
                            return;

                        },
                        error: function () {

                            sessionStorage.clear();
                            top.location.href = 'index.html';
                            return;

                        }// error: function();
                    });// $.ajax();
                }// onConfirm: function(options);

            });// Modal.confirm();

        });// $("#headerLogout").click();

        // '购物车' 按钮事件
        $("#btnCart").click(function(){

            // 当前用户token
            let token = sessionStorage.getItem("token");

            // 判断当前用户是否登录(token是否存在)
            if( !token ) {
                // token不存在的话，就提示登录
                $("#member-login-modal").modal();
                return;

            }// if( !token );

            // 如果当前用户已经登录
            // 就跳转到购物车页面
            top.location.href = 'cart_item_list.html';

        });// $("#btnCart").click();

        // '关键字' 输入框回车键事件
        $("#keyword").keydown(function(event){

            // 如果按下的是回车键(13)
            if( event.keyCode == 13 ) {
                // 执行关键字查询
                // 获取关键字数据
                let keyword = $("#keyword").val();

                // 如果没有输入关键字，就不进行提交跳转
                if( keyword.trim() != '' ) {
                    top.location.href = 'product_picture_list.html?k=' + encodeURIComponent(keyword);
                } else {
                    Modal.alert('请输入关键字');
                }// if( keyword.trim() != '' );
            }// if( event.keyCode == 13 );

        });// $("#keyword").keydown();

        // '搜索' 按钮事件
        $("#btnSearch").click(function(){

            // 获取关键字数据
            let keyword = $("#keyword").val();

            // 如果没有输入关键字，就不进行提交跳转
            if( keyword.trim() != '' ) {
                top.location.href = 'product_picture_list.html?k=' + encodeURIComponent(keyword);
            } else {
                Modal.alert('请输入关键字');
            }// if( keyword.trim() != '' );

        });// $("#btnSearch").click(function());

        // '登录'表单提交事件
        $('#loginWindowForm').on('submit', function() {

            // '登录'按钮变为'loading'文本
            $("#loginWindowFormBtn").button('loading');

            // Ajax提交表单
            $(this).ajaxSubmit({
                success: function(result) {

                    // 重置表单和按钮
                    $(this).resetForm();
                    $("#member-login-modal").modal('close');
                    $("#loginWindowFormBtn").button('reset');

                    // 如果返回的数据的响应码不是'成功(200)'
                    if(result.code != 200) {
                        Modal.alert(result.msg);
                        return;
                    }

                     // 如果返回的数据响应码为200
                    let user = result.data;

                     // 将账户信息存入到客户端session中
                    sessionStorage.setItem( "user", JSON.stringify(user) );
                    // 将用户token存入客户端session中
                    sessionStorage.setItem( "token", result.token );

                    // 如果用户没有设置过'找回密码'的安全问题
                    if( !user.question || user.question == '' ) {
                        Modal.confirm('登录成功！<br/><br/>为了您的账户安全，请到"会员中心"设置您的<a href="member_password_input.html">安全问题</a>！', {
                            closeViaDimmer: false,
                            onConfirm: function() {
                                top.location.reload();
                            },
                            onCancel: function() {
                                top.location.reload();
                            }
                        });// Modal.confirm();

                    } else {
                        Modal.confirm('登录成功！', {
                            closeViaDimmer: false,
                            onConfirm: function() {
                                top.location.reload();
                            },
                            onCancel: function() {
                                top.location.reload();
                            }
                        });// Modal.confirm();

                    }// if( !user.question || user.question == '' );

                }//  success: function(result);
            });
            return false; // 阻止表单自动提交事件

        });//  $('#loginWindowForm').on('submit', function());

        // '注册表单提交'事件
        $('#registerWindowForm').on('submit', function() {

            // '注册'按钮变为'loading'文本
            $("#registerWindowSubmitBtn").button('loading');

            // Ajax提交表单
            $(this).ajaxSubmit({
                success: function(result) {

                    // 重置表单和按钮
                    $(this).resetForm();
                    $("#member-register-modal").modal('close');
                    $("#registerWindowSubmitBtn").button('reset');

                    // 如果返回的数据的响应码不是'成功(200)'
                    if(result.code != 200) {
                        Modal.alert(result.msg);
                        return;
                    }

                    // 如果返回的数据响应码为200
                    Modal.alert("注册成功!");

                    // 刷新头部信息
                    $.flushHeaderInfo();

                }// success: function(result);
            });// $(this).ajaxSubmit();

            // 阻止表单自动提交事件
            return false;

        });// $('#registerWindowForm').on('submit', function());

        // 判断是否传递了商品分类id和分类父id
        if( categoryId && parentCategoryId ) {
            // 加载当前类别的商品分类列表
            loadCategoryList();
        } else {
            // 如果没有传递商品分类id，就加载'热门分类'
            loadHotCategoryList();
        }



    });// $(function());

/**	加载'商品分类'列表数据 **/
function loadCategoryList() {

    // 加载'商品分类'数据
    $.ajax({
        type: 'POST',
        url: 'http://localhost:8080/category/getAll',
        async: false,
        success: function (result) {
            // 如果返回的数据的响应码不是'成功(200)'
            if (result.code != 200) {
                Modal.alert(result.msg);
                return;
            }

            // 如果返回的数据响应码为200
            // 就进行表格数据填充
            categoryList = result.data;

            // 填充分类列表
            fillCategoryList();

        }// success()

    });// $.post();

}// loadCategoryList();

/**	加载'热门分类'列表数据 **/
function loadHotCategoryList() {

    // 加载'数据字典'数据
    $.post('http://localhost:8080/category/getHotList', function (result) {

        // 如果返回的数据的响应码不是'成功(200)'
        if(result.code != 200) {
            Modal.alert(result.msg);
            return;
        }

        // 如果返回的数据响应码为200
        // 就进行表格数据填充
        categoryList = result.data;

        // 填充表格数据
        fillHotCategoryList();

    });// $.post();

}// loadCategoryList();

/** 填充表格数据 **/
function fillHotCategoryList( ) {

    // 清空表格数据
    $('#ulCategoryList').empty();

    // 如果没有集合数据，就直接返回
    if( !categoryList || categoryList.length == 0 ){
        return;
    }// if();

    // 循环构造单元格数据，并进行填充父分类
    for( let i = 0; i < categoryList.length; i++ ) {

        let category = categoryList[i];

        // 分类名称
        let aName = '<a href="product_picture_list.html?cid=' + category.id + '&pcid=' + category.parentId + '"><span class="am-icon-star-o am-margin-right-xs"> </span>' + category.name + '</a></li>';

        // 分割线
        let liDashedLine = '<li class="am-divider-dashed"></li>';

        // 将构造好的单元格数据，填充到表格中
        $('#ulCategoryList').append('<li>' + aName + '</li>' + liDashedLine);

    }// for();

}// fillHotCategoryList();

/** 填充表格数据 **/
function fillCategoryList( ) {

    // 填充分类按钮
    // 分类名称
    let categoryName = getCategoryName(categoryId);

    // 如果传入的分类父id，不是顶级分类
    if( parentCategoryId != 0 )
        categoryName = getCategoryName(parentCategoryId);

    // 分类图标
    let categoryIcon = PRODUCT_CATEGORY_ICON[parentCategoryId];
    // 如果传入的分类父id，是顶级分类
    if( parentCategoryId == 0 )
        categoryIcon = PRODUCT_CATEGORY_ICON[categoryId];

    // 填充分类按钮
    $('#btnHotCategory').html('<span class="' + categoryIcon + '"></span>&nbsp;' + categoryName + '&nbsp;<span class="am-icon-caret-down"></span>');

    // 清空表格数据
    $('#ulCategoryList').empty();

    // 如果没有集合数据，就直接返回
    if( !categoryList || categoryList.length == 0 ){
        return;
    }// if();

    // 循环构造单元格数据，并进行填充父分类
    for( let i = 0; i < categoryList.length; i++ ) {

        let category = categoryList[i];

        // 如果是顶级分类，就判断临时类别的父id，是否等于传入的分类id
        if( parentCategoryId == 0 && category.parentId != categoryId ) {
            // 不相等的话，就跳过
            continue;
        } else if( parentCategoryId != 0 && category.parentId != parentCategoryId  ) {
            // 如果不是顶级分类(父分类id不为0)
            // 并且临时类别的父id不等于传入的分类父id
            continue;

        }

        // 分类名称
        let aName = '<a href="product_picture_list.html?cid=' + category.id + '&pcid=' + category.parentId + '"><span class="' + categoryIcon + ' am-margin-right-xs"> </span>' + category.name + '</a></li>';

        // 分割线
        let liDashedLine = '<li class="am-divider-dashed"></li>';

        // 将构造好的单元格数据，填充到表格中
        $('#ulCategoryList').append('<li>' + aName + '</li>' + liDashedLine);

    }// for();

}// fillCategoryList();

/** 根据商品分类id，获取分类名称 **/
function getCategoryName( cid ) {

    let categoryName = '';

    for( let i = 0; i < categoryList.length; i++ ) {

        let category = categoryList[i];

        if( category.id == cid ) {
            categoryName = category.name;
            break;
        }

    }// for();

    return categoryName;

}// getChildrenCategoryIds( parentCategoryId );
</script>